<template>
  <view class="">
    <view class="head flex-vb">
      <image class="head-bg" src="@/static/img/bg.png" mode="" />
      <view v-if="shareuUrl" class="share-btn flex-ca" hover-class="hover" @click="$f.copy(shareuUrl)">专属推广</view>
      <view class="head-main">
        <view class="">
          <view class="mb-5">可提现金额(元)</view>
          <view class="balance ">{{ user.balance || 0 }}</view>
        </view>
        <view class="tabs flex-a">
          <view class="flex-1">
            <view class="text-16">{{ today.order_amount || 0 }}</view>
            <view class="opacity text-12 mt-3">今日收益</view>
          </view>
          <view class="flex-1">
            <view class="text-16">{{ today.order_num || 0 }}</view>
            <view class="opacity text-12 mt-3">今日订单</view>
          </view>
          <view class="flex-1">
            <view class="text-16">{{ today.total_num || 0 }}</view>
            <view class="opacity text-12 mt-3">今日推广</view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex py-5 bg-white">
      <view class="h-40 flex-1 flex-ca text-primary" hover-class="hover" @click="onWithdraw">
        <view class="iconfont icon-qiandai mr-5" />
        <view class="">佣金提现</view>
      </view>
      <view class="h-40 flex-1 flex-ca text-primary hair--l" hover-class="hover" @click="navigateTo('/pages/income/withdraw')">
        <view class="iconfont icon-zhangdan mr-5" />
        <view class="">提现记录</view>
      </view>
    </view>
    <view class="bg-white mt-12">
      <view class="flex-ba h-48 leading-20 px-15" @click="navigateTo('/pages/income/object')">
        <view class="">专题推广</view>
        <view class="iconfont icon-right text-info text-12" />
      </view>
      <view class="flex-ba h-48 leading-20 px-15 hair--y" @click="navigateTo('/pages/income/user')">
        <view class="">我的推广</view>
        <view class="iconfont icon-right text-info text-12" />
      </view>
      <view class="flex-ba h-48 leading-20 px-15" @click="navigateTo('/pages/income/commission')">
        <view class="">佣金明细</view>
        <view class="iconfont icon-right text-info text-12" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fc: '',
      shareuUrl: '',
      today: {}
    }
  },
  computed: {
    user() {
      return this.$store.state.userInfo
    }
  },
  onShareAppMessage() {
	  return this.$f.wxShare('/pages/index/index', { fc: this.fc })
  },
  onShareTimeline() {
	  return this.$f.wxShare('/pages/index/index', { fc: this.fc })
  },
  onLoad() {
    this.getData()
  },
  methods: {
    getData() {
      this.$f.post('api/today').then(res => {
        this.today = res.data
      })
      this.$f.post('api/copyUrl').then(res => {
        this.fc = res.data.fc
        // #ifdef H5
        let url = window.location.href.split('#')[0] + '#/'
        this.shareuUrl = this.$f.getShareUrl(url, { fc: res.data.fc })
        this.$f.wxShare({
          link: this.shareuUrl
        }, 1000)
        // #endif
      })
    },
    navigateTo(path) {
      this.$Router.push(path)
    },
    onWithdraw() {
      const that = this
      if (that.user.balance < 1) {
        return that.$f.toast('提现金额不能少于1元')
      }
      that.$f.showModal({
        title: '提示',
        content: '您确定要提现吗？'
      }).then(res => {
        that.$f.post('').then(res2 => {
          if (res2.code === 0) {
            that.$f.toast(res2.msg || '提现成功')
            that.$store.dispatch('getUserInfo')
          } else {
            that.$f.toast(res2.msg || '提现失败')
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.h-48 {
	height: 96rpx;
}
.head {
	position: relative;
	padding: 60rpx 0;
	height: 360rpx;
	box-sizing: border-box;
	color: #fff;
	width: 100%;
	justify-content: center;
	text-align: center;
}
.head-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.head-main {
	position: relative;
	z-index: 1;
}
.balance {
	font-size: 60rpx;
}
.tabs {
	padding-top: 60rpx;
}
.share-btn {
	position: absolute;
	right: 20rpx;
	top: 30rpx;
	height: 44rpx;
	font-size: 24rpx;
	padding: 0 24rpx;
	border-radius: 48rpx;
	background-color: #fff;
	color: $uni-primary;
	border: 2rpx solid $uni-primary;
	z-index: 2;
}
</style>
